<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>多标签分页列表</title>
    <link rel="stylesheet" th:href="@{//cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css}">
    <script th:src="@{//cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js}"></script>
    <script th:src="@{//cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js}"></script>
    <style>
        /* 新增：凭证链接样式 */
        .certificate-link {
            position: absolute;
            top: 20px;
            right: 300px;
            z-index: 1000;
        }
        .pagination-info {
            margin-bottom: 15px;
            font-size: 14px;
            color: #6c757d;
        }
        .empty-table-row td {
            padding: 2rem;
            text-align: center;
            color: #6c757d;
            font-style: italic;
        }
        /* 新增内容截断样式 */
        .content-cell {
            max-width: 300px; /* 控制单元格最大宽度 */
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer; /* 鼠标悬停时显示手型 */
        }
        /* 新增：工具提示最大宽度 */
        .tooltip-inner {
            max-width: 500px; /* 扩大提示框宽度 */
            white-space: pre-wrap; /* 允许换行 */
            text-align: left; /* 左对齐 */
        }
        /* 确保表格布局稳定 */
        table {
            table-layout: fixed;
            width: 100%;
        }
        /* 为各列设置合适宽度 */
        th:nth-child(1), td:nth-child(1) { width: 5%; }   /* 序号 */
        th:nth-child(2), td:nth-child(2) { width: 15%; }  /* 资源名称 */
        th:nth-child(3), td:nth-child(3) { width: 35%; }  /* 资源内容 */
        th:nth-child(4), td:nth-child(4) { width: 15%; }  /* 归属 */
        th:nth-child(5), td:nth-child(5) { width: 15%; }  /* 创建时间 */
        th:nth-child(6), td:nth-child(6) { width: 15%; }  /* 操作 */
    </style>
</head>
<body>
<div class="container mt-4">
    <!-- 身份信息展示 -->
    <div class="mb-3">
        <strong>接入连接器:</strong>
        <span class="text-primary" th:text="${acconName} ?: '未配置'"></span>
    </div>
    <!-- 新增：凭证超链接 -->
    <a href="/cert/" class="btn btn-outline-primary certificate-link">凭证</a>

    <!-- 标签页导航 -->
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link active" data-tab="FILE" href="#">文件资源</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-tab="DB" href="#">数据资源</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-tab="FUNC" href="#">服务资源</a>
        </li>
    </ul>

    <!-- 动态加载表格区域 -->
    <div class="mt-3" id="tab-content">
        <!-- AJAX加载内容将渲染在这里 -->
    </div>

    <!-- 在<body>标签内添加对话框容器 -->
    <div id="dialogContainer"></div>
</div>

<script>
    $(function() {
        // 默认加载第一个标签页
        loadTabData('FILE', 1);

        // 修改标签页切换事件
        $('.nav-tabs').on('click', 'a.nav-link', function(e) {
            e.preventDefault();
            destroyTooltips(); // 先销毁旧实例
            $('.nav-tabs a').removeClass('active');
            $(this).addClass('active');
            loadTabData($(this).data('tab'), 1);
        });

        // 修改分页事件
        $('#tab-content').on('click', '.page-link', function(e) {
            e.preventDefault();
            if ($(this).parent().hasClass('disabled')) return;
            destroyTooltips(); // 先销毁旧实例
            const resType = $(this).closest('.pagination').data('tab');
            const pageNum = $(this).data('page');
            loadTabData(resType, pageNum);
        });

        // 新增：申请按钮点击事件委托处理
        $('#tab-content').on('click', '.apply-btn', function(e) {
            e.preventDefault();
            const rowId = $(this).data('id');
            handleApplyClick(rowId);
        });
    });

    // 申请按钮点击处理函数
    function handleApplyClick(rowId) {
        var url = '/res/choose/'+rowId;
        $('#dialogContainer').load(url, function() {
            // 初始化模态框
            const modal = new bootstrap.Modal('#chooseSpaceModal');
            modal.show();
            // 父页面中
            window.closeModal = function() {
              modal?.hide();
            };
        });
    }

    // 新增：销毁所有工具提示实例的函数
    function destroyTooltips() {
        $('#tab-content [data-bs-toggle="tooltip"]').each(function() {
            const tooltip = bootstrap.Tooltip.getInstance(this);
            if (tooltip) {
                tooltip.dispose();
                $(this).removeAttr('title data-bs-title'); // 清理残留属性
            }
        });
    }

    // 加载标签数据函数
    function loadTabData(resType, pageNum, pageSize = 10) {
        $.ajax({
            url: '/res/list',
            type: 'GET',
            dataType: 'json',
            data: {
                type: resType,
                pageNum: pageNum,
                pageSize: pageSize
            },
            success: function(response) {
                destroyTooltips(); // 先销毁旧实例
                renderTable(response, resType, pageSize);
            },
            error: function() {
                $('#tab-content').html('<div class="alert alert-danger">数据加载失败</div>');
            },
            beforeSend: function() {
                $('#tab-content').html('<div class="text-center py-4">加载中...</div>');
            }
        });
    }

    // === 核心修改：简化工具提示初始化 ===
    function initTooltips() {
        // 使用Bootstrap标准初始化方式
        const tooltipElements = document.querySelectorAll('#tab-content [data-bs-toggle="tooltip"]');
        tooltipElements.forEach(el => {
            // 仅初始化尚未有实例的元素
            if (!bootstrap.Tooltip.getInstance(el)) {
                new bootstrap.Tooltip(el, {
                    html: false
                });
            }
        });
    }

    // 渲染表格和分页控件（关键修改）
    function renderTable(pageData, resType, pageSize) {
        const $container = $('<div>');
        const paginationInfo = `共 ${pageData.total || 0} 条记录，每页 ${pageSize} 条`;
        $container.append(`<div class="pagination-info">${paginationInfo}</div>`);

        // === 表格结构始终渲染（含表头）===
        const $table = $('<table>', {class: 'table table-striped'});
        const $thead = $('<thead>').appendTo($table);
        const $tbody = $('<tbody>').appendTo($table);

        // 表头（始终显示）
        $('<tr>').appendTo($thead)
            .append('<th>序号</th>')
            .append('<th>资源名称</th>')
            .append('<th>资源内容</th>')
            .append('<th>归属</th>')
            .append('<th>创建时间</th>')
            .append('<th>操作</th>');

        // 表格数据行
        if (pageData.rows && pageData.rows.length > 0) {
            pageData.rows.forEach((resource, index) => {
                const createTime = new Date(resource.createTime).toLocaleString();
                const $row = $('<tr>').appendTo($tbody);

                // 处理资源内容：超过100字符时截断
                const content = resource.content || '';
                let displayContent = content;
                let fullContent = content;

                if (content.length > 100) {
                    displayContent = content.substring(0, 100) + '...';
                }

                // 修改内容单元格的创建方式
                $row.append(`<td>${index + 1}</td>`)
                    .append(
                        resource.remark ? $(`<td>`).append(
                            $(`<a>`)
                                .attr('href', resource.remark) // 使用 remark 字段作为下载链接
                                .attr('download', '')          // 强制浏览器下载而非打开
                                .addClass('text-decoration-none') // 可选：移除下划线
                                .text(resource.name)
                        ): $(`<td>`).text(resource.name)
                    )
                    .append(
                        $(`<td>`)
                            .addClass('content-cell')
                            .attr('data-bs-toggle', 'tooltip')  // 分开设置属性
                            .attr('data-bs-placement', 'top')
                            .attr('title', () => fullContent)  // 关键修改：使用 title 代替 data-bs-title
                            .text(displayContent)
                    )
                    .append(`<td>${resource.createBy}</td>`)
                    .append(`<td>${createTime}</td>`)
                    // 修改：为申请按钮添加data-id属性存储资源ID
                    .append(
                        $(`<td>`).append(
                            $(`<button>`)
                                .addClass('btn btn-sm btn-primary apply-btn')
                                .attr('data-id', resource.id) // 存储资源ID
                                .text('申请')
                        )
                    );
            });
        } else {
            // 无数据提示行（跨列显示）
            $('<tr class="empty-table-row">').appendTo($tbody)
                .append(`<td colspan="6">暂无数据</td>`);
        }

        $container.append($table);

        // === 分页控件（始终显示）===
        const $pagination = $('<ul>', {
            class: 'pagination',
            'data-tab': resType
        });

        // 计算总页数（兼容无数据情况）
        const totalPages = pageData.pages || 1;
        const currentPage = pageData.pageNum || 1;

        // 首页按钮
        const $firstLi = $('<li>', {
            class: `page-item ${currentPage === 1 ? 'disabled' : ''}`
        }).append(
            $('<a>', {
                class: 'page-link',
                href: '#',
                'data-page': 1,
                text: '首页'
            })
        );

        // 上一页
        const $prevLi = $('<li>', {
            class: `page-item ${currentPage === 1 ? 'disabled' : ''}`
        }).append(
            $('<a>', {
                class: 'page-link',
                href: '#',
                'data-page': currentPage - 1,
                text: '上一页'
            })
        );

        // 页码按钮
        const pageItems = [];
        if (totalPages > 0) {
            for (let i = 1; i <= totalPages; i++) {
                pageItems.push(
                    $('<li>', {
                        class: `page-item ${currentPage === i ? 'active' : ''}`
                    }).append(
                        $('<a>', {
                            class: 'page-link',
                            href: '#',
                            'data-page': i,
                            text: i
                        })
                    )
                );
            }
        }

        // 下一页
        const $nextLi = $('<li>', {
            class: `page-item ${currentPage === totalPages ? 'disabled' : ''}`
        }).append(
            $('<a>', {
                class: 'page-link',
                href: '#',
                'data-page': currentPage + 1,
                text: '下一页'
            })
        );

        // 尾页
        const $lastLi = $('<li>', {
            class: `page-item ${currentPage === totalPages ? 'disabled' : ''}`
        }).append(
            $('<a>', {
                class: 'page-link',
                href: '#',
                'data-page': totalPages,
                text: '尾页'
            })
        );

        // 组装分页控件
        $pagination.append($firstLi, $prevLi, ...pageItems, $nextLi, $lastLi);
        $container.append($pagination);

        // 更新内容区域
        $('#tab-content').empty().append($container.children());
        initTooltips(); // 新增初始化调用
    }
</script>
</body>
</html>